<template>
    <div class="real-time">
        <div class="module-title2">
            <div class="module-title_text">实时数据</div>
        </div>
        <div class="real-time_module module-container">
            <div class="real-time-module__data">
                <div class="module-text">今日访客(人)</div>
                <div class="module-total">
                    <div class="module-total_text">{{basicData.visitorCount}}</div>
                    <img src="../../../assets/icons/data-bottom.png" class="module-total_bgm" />
                </div>
            </div>
            <div class="real-time-module__data">
                <div class="module-text">车辆出入(辆)</div>
                <div class="module-total">
                    <div class="module-total_text">{{carTotal}}</div>
                    <img src="../../../assets/icons/data-bottom.png" class="module-total_bgm" />
                </div>
            </div>
            <div class="real-time-module__data">
                <div class="module-text">事件报警(次)</div>
                <div class="module-total">
                    <div class="module-total_text">{{basicData.policeCount}}</div>
                    <img src="../../../assets/icons/data-bottom.png" class="module-total_bgm" />
                </div>
            </div>
            <div class="real-time-module__data">
                <div class="module-text">人员出入</div>
                <div class="module-total">
                    <div class="module-total_text">{{punchTotal}}</div>
                    <img src="../../../assets/icons/data-bottom.png" class="module-total_bgm" />
                </div>
            </div>
            <div class="real-time-module__data">
                <div class="module-text">视频监控(个)</div>
                <div class="module-total">
                    <div class="module-total_text">{{deviceTotal}}</div>
                    <img src="../../../assets/icons/data-bottom.png" class="module-total_bgm" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCarQueryCount, getPunchQueryCount, getDeviceQuery } from '@/api/index.js'
export default {
    props: {
        basicData: {
            typeof: Object
        }
    },
    data() {
        return {
            carTotal: 0,
            punchTotal: 0,
            deviceTotal: 0
        }
    },
    methods: {
        _getCarQueryCount() {
            const startTime = this.$moment().format('YYYY-MM-DD')
            const endTime = this.$moment().add(1, 'd').format('YYYY-MM-DD')
            const params = {
                startTime,
                endTime,
            }
            getCarQueryCount(params).then((res) => {
                if (res.data) {
                    this.carTotal = res.data[0]?.carCount
                }
            })
        },
        _getPunchQueryCount() {
            const startTime = this.$moment().format('YYYY-MM-DD')
            const endTime = this.$moment().add(1, 'd').format('YYYY-MM-DD')
            const params = {
                startTime,
                endTime,
            }
            getPunchQueryCount(params).then((res) => {
                if (res.data) {
                    this.punchTotal = res.data[0]?.personCount
                }
            })
        },
        _getDeviceQuery() {
            getDeviceQuery().then((res) => {
                if (res.data) {
                    this.deviceTotal = res.data.length
                }
            })
        },
    },
    created() {
        this._getCarQueryCount()
        this._getPunchQueryCount()
        this._getDeviceQuery()
    }
}
</script>

<style lang="less" scoped>
.real-time {
    margin-top: 775px;
    .real-time_module {
        width: 946px;
        height: 127px;
        margin-top: 6px;
        padding: 17px 40px 11px 37px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .real-time-module__data {
            width: 131.4px;
            font-size: 15px;
            color: #FFFFFF;
            text-align: center;
            .module-total {
                position: relative;
                margin-top: 15px;
                height: 63.2px;
                .module-total_text {
                    font-weight: bold;
                    font-size: 31px;
                    color: #FFFFFF;
                    position: absolute;
                    top: 0;
                    z-index: 10;
                    width: 131.4px;
                    text-align: center;
                }
                .module-total_bgm {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 131.4px;
                    height: 43.2px;
                }
            }
        }
    }
}
</style>